<template>
  <el-aside :style="{width: `${isCollapse ? 63 : 240}px !important`}">
    <el-menu
      :collapse="isCollapse"
      :router="true"
      :default-active="activePath"
      class="el-menu-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <wrapper-menu-item :navList="navList"></wrapper-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
  import WrapperMenuItem from './WrapperMenuItem';
  import {ref, watch, toRef} from 'vue';
  const props = defineProps(['navList', 'path', 'isCollapse']);
  // 也可以这样写 const {path} = toRefs(props);
  const path = toRef(props, 'path');
  const activePath = ref('');
  const setActivePath = () => (activePath.value = path.value[path.value.length - 1]);
  setActivePath();
  watch(path, setActivePath);
</script>

<style lang="less" scoped>
  .el-aside {
    background-color: @background-color-lighter;
    text-align: center;
  }
  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    background-color: @background-color-lighter !important;
    color: @color-text-regular !important;
    text-align: left;
    &:hover,
    &:hover * {
      color: rgba(65, 178, 255, 0.8) !important;
    }
  }
  :deep(.el-menu-item.is-active),
  :deep(.el-sub-menu.is-active > .el-sub-menu__title *) {
    color: @color-primary !important;
  }
</style>
